<template>
    <div class="commodity-box">
        <!-- 商品管理 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <div class="function-box" v-if="checkPermi(['system:product:edit'])">
            <el-button class="createBtn" @click="addGoodsInfo"><i class="iconfont icon-plus-square" />新增</el-button>

            <el-button class="exportBtn" plain @click="deleteData"><i class="iconfont icon-shanchu" />删除</el-button>
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @updatePage="updatePage"
            @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData" :tableData="inventoryTableData"
            @tableDetail="tableDetail">
        </forTableCom>
        <commodityPopUps v-if="flag" :PopData="PopData" :popTitle="popTitle" :defindFlag="defindFlag"
            @popUpsFlase="popUpsFlase" :disabled="disabled" @getoutboundOrderData="getoutboundOrderData" />
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { querySelectProductApi, deleteProductApi } from '@/api/inventory';
import { ElMessage, ElMessageBox } from 'element-plus'
import commodityPopUps from './components/commodityPopUps'
import { ref, onMounted } from 'vue';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { deletePopHook } from '@/hook/setPop/deletePop.js'
import { checkPermi } from "@/utils/permission.js";

let updatePop = updatePopHook()
let deletePop = deletePopHook()
// 弹窗
let flag = ref(false)
// 详情禁用
let disabled = ref(false)
// 弹窗标题
let popTitle = ref('新增商品管理信息')
// 勾选激活行的背景色
const idActive = 'productInfoId'
// 详情控制变量
let defindFlag = ref(true)
// 修改详情回显数据弹窗
let PopData = ref([])
// 表单
let inventoryForm = ref(
    {
        productInfoId: '',      // 产品编号
        productName: '',    // 存货名称
        suppliersName: '',      // 供应商名称
        category: '',       // 所属类别
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'productInfoId',
        label: '产品编号'
    },
    {
        name: 'productName',
        label: '存货名称'
    },
    {
        name: 'suppliersName',
        label: '供应商名称'
    },
    {
        name: 'category',
        label: '所属类别'
    },

])
// 查找suppliersName
const onSearch = (v) => {
    pageNum.value = 1
    querySelectProduct(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'productInfoId',
        label: '产品编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'productName',
        label: '存货名称',
        colorClassName: 'activeColor'
    },
    {
        prop: 'category',
        label: '所属类别'
    },
    {
        prop: 'specs',
        label: '规格型号'
    },
    {
        prop: 'unit',
        label: '单位'
    },
    {
        prop: 'price',
        label: '单价'
    },
    {
        prop: 'stockQuantity',
        label: '存货数量'
    },
    {
        prop: 'preparedReserves',
        label: '预存货数量'
    },
    {
        prop: 'stockroomWarehouse',
        label: '入库仓库',
        colorClassName: 'activeColor'
    },
    {
        prop: 'suppliersName',
        label: '供应商名称',
        colorClassName: 'activeColor',
    },
])
// 表格数据内容
let inventoryTableData = ref([])

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit

    let params = inventoryForm.value
    querySelectProduct(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}

// 新增数据页面
const addGoodsInfo = () => {
    flag.value = true
    disabled.value = false
    popTitle.value = '新增商品管理信息'
}
// 修改数据页面
const updateGoodsInfo = () => {
    updatePop(multipleSelection, flag, popTitle, '修改商品管理信息', disabled)
}
// 详情双击行
const tableDetail = (props) => {
    console.log(props);
    flag.value = true
    disabled.value = true
    popTitle.value = '商品管理详情信息'
    defindFlag.value = false
    PopData.value = props
}
// 关闭新增页面
const popUpsFlase = (v) => {
    defindFlag.value = true
    flag.value = v
}
// 查询商品管理接口
const querySelectProduct = async (data = {}) => {
    let page = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(data, page)
    let res = await querySelectProductApi(params)
    let { code, rows, total } = res
        if (code == 200) {
            rows.forEach(v => {
                v.productVOS.forEach(v1 => {
                    console.log({ ...v, ...v1 });
                    inventoryTableData.value.push({ ...v, ...v1 })
                })
            })
            totals.value = total
        }
   
}
// 删除商品接口
const deleteData = async () => {
    let fn = async () => {
        let params = {
            productInfoId: multipleSelection.value[0].productInfoId
        }
        let res = await deleteProductApi(params)
        let { code, msg } = res
        if (code == 200) {
            getoutboundOrderData()
            ElMessage({
                message: msg,
                type: 'success',
            })
        }
    }
    deletePop(multipleSelection, fn)
}
// 请求出库单接口函数
const getoutboundOrderData = () => {
    querySelectProduct()
}
onMounted(() => {
    querySelectProduct()
})
</script>
<style scoped lang='scss'>
.commodity-box {
    padding: 16px;
}
</style>
